<template>
  <div class="app-item">
    <div class="content">
      <div class="logo">
        <img src="" alt="" />
        <!-- {{ data.logo }} -->
      </div>
      <div class="desc">
        <div class="app-name">{{ data.name }}</div>
        <div class="time">{{ data.time }}</div>
      </div>
      <div class="more">
        <el-dropdown @command="chooseCommand">
          <span class="el-dropdown-link">
            <i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="edit">编辑</el-dropdown-item>
            <el-dropdown-item command="delete">移除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="40%"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="系统名称">
          <el-input v-model="form.app_name"></el-input>
        </el-form-item>
        <el-form-item label="容器规格">
          <el-input v-model="form.app_name"></el-input>
        </el-form-item>
        <el-form-item label="示例副本数">
          <el-input v-model="form.app_name"></el-input>
        </el-form-item>
        <el-form-item label="内存CPU端口">
          <el-input v-model="form.app_name"></el-input>
        </el-form-item>
        <el-form-item label="容器镜像">
          <el-input v-model="form.app_name"></el-input>
        </el-form-item>
        <el-form-item label="触发器链接">
          <!-- <el-input v-model="form.app_name"></el-input> -->
          <div class="link">
            <div>
              {{ link_url }}
            </div>
            <i class="el-icon-copy-document" @click="copyLink"></i>
          </div>
        </el-form-item>
        <el-form-item label="组件状态">
          <el-input v-model="form.app_name"></el-input>
        </el-form-item>
        <el-form-item label="环境变量">
          <el-input v-model="form.app_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {},
    },
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        app_name: "",
      },
      link_url:
        "http://modao.cc/app/Lmhfjaoifsospaofhfjaoifsospaofhfjaoifsospaofapffjs9Ao",
    };
  },
  methods: {
    chooseCommand(e) {
      console.log(e);
      if (e == "edit") {
        console.log("编辑");
        this.dialogVisible = true;
      } else if (e == "delete") {
        console.log("删除");
      }
    },
    copyLink() {
      this.$copyText(this.link_url).then(
        (res) => {
          console.log(res); //链接复制成功
          this.$message.success("链接复制成功");
        },
        (err) => {
          console.log(err); //链接复制失败
          this.$message.error("链接复制失败");
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.app-item {
  /* There will be 4 cards per row */
  //   flex-basis: 18%;
  width: 300px;
  height: 96px;
  background: #f5f7fa;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  margin-bottom: 32px;
  padding: 8px 20px;
  margin-right: 20px;
}
.more {
  width: 30px;
  height: 20px;
  display: flex;
  justify-content: flex-end;
  font-size: 20px;
  align-self: flex-start;
  i {
    transform: rotate(90deg);
    cursor: pointer;
    color: #666;
  }
}

.content {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  .logo {
    width: 48px;
    height: 48px;
    background: #d9d9d9;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #ffffff;
    margin-right: 12px;
  }
  .desc {
    flex: 1;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .app-name {
      font-size: 14px;
      color: #333333;
    }
    .time {
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
  }
}

.link {
  display: flex;
  align-items: center;
  div {
    flex: 1;
  }
  i {
    color: rgb(24, 144, 255);
    cursor: pointer;
  }
}
</style>
